<template>
  <div class="item_box flex_Level" v-for="(item, index) in menu.asideList" :key="index">
    <div class="left_title">{{ item.text }}</div>
    <div class="flex_Level">
      <div class="right_value" v-for="(value, key) in item.children" :key="key" @click="router.push(value.path)">{{ value.text }}</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
import { menuStore } from '@/store'
const router = useRouter()
const menu = menuStore()
</script>

<style scoped lang="scss">
.item_box {
  padding: 20px;

  .left_title {
    width: 100px;
    padding: 20px;
    font-size: 20px;
    font-weight: bold;
    border-right: 2px solid red;
    margin-right: 50px;
  }

  .right_value {
    border: 1px solid #cccccc;
    padding: 10px;
    margin: 0 20px;
  }
}
</style>
